<script setup>
import { ref } from 'vue'
import { globalConfig } from '@/config'
import mitt from '@/mitt'
import { Close } from '@element-plus/icons-vue'
const hostIp = ref(window.localStorage.getItem('host_id') || globalConfig.hostIp)
const isDrag = ref(!!window.localStorage.getItem('is_drag'))
const isClient = window.electronApi
const setIp = () => {
  if (window.localStorage.getItem('host_id') !== hostIp.value) {
    window.localStorage.removeItem('game-user')
    window.localStorage.setItem('host_id', hostIp.value)
  }
  window.location.reload()
}

const change = (val) => {
  if (val) {
    window.localStorage.setItem('is_drag', 'yes')
  } else {
    window.localStorage.removeItem('is_drag')
  }
}

/**
 * @description 关闭弹框
 */
const closeDialog = () => {
  mitt.emit('set-ip', false)
}
</script>

<template>
  <div class="w-[100vw] h-[100vh] bg-[#141623] flex items-center justify-center fixed z-10">
    <div class="bg-[#20222e] p-5 rounded-md space-y-4">
      <div class="text-[#f5f5f5] tracking-[1px] flex justify-between items-center">
        <div>客户端配置</div>
        <el-icon class="cursor-pointer hover:opacity-60" @click="closeDialog">
          <Close></Close>
        </el-icon>
      </div>
      <div class="flex items-center">
        <div class="w-[80px]">服务器地址</div>
        <div><el-input v-model="hostIp" placeholder="http://"></el-input></div>
      </div>
      <div class="flex items-center">
        <div class="w-[80px]">是否可拖动</div>
        <div>
          <el-switch v-model="isDrag" @change="change" />
        </div>
      </div>
      <div class="flex">
        <el-button :disabled="!hostIp" type="primary" class="cursor-pointer flex-1" @click="setIp"
          >确定</el-button
        >
      </div>
    </div>
  </div>
</template>
